<template>
  <div class="container">
    <div class="container-top">
      <div class="container-top-row1">
        <div class="container-top-row1-left">
          <nut-avatar size="large">
            <img
              style="border-radius: 50%"
              :src="Userinfo.headImg"
              v-if="Userinfo?.headImg"
            />
            <img
              v-else
              style="border-radius: 50%"
              src="../../assets/images/myImg/fontImage.png"
              alt=""
            />
          </nut-avatar>
          <div class="container-top-row1-left-name">
            <div
              class="container-top-row1-left-name-font"
              v-if="Userinfo?.nickName"
            >
              {{ Userinfo?.nickName }}
            </div>
            <div class="container-top-row1-left-name-font" v-else>抖音用户</div>
            <div class="container-top-row1-left-name-id" v-if="Userinfo?.id">
              ID:{{ Userinfo?.id }}
            </div>
            <div class="container-top-row1-left-name-id" v-else>ID:000</div>
          </div>
        </div>
        <div class="container-rop-row1-right" @click="orderCenter">
          <div class="container-rop-row1-right-wenzi">分销中心</div>
          <div
            class="iconfont icon-jinrujiantou container-rop-row1-right-icon"
          ></div>
        </div>
      </div>
      <div style="height: 10px"></div>
      <div class="container-top-row2">
        <div class="container-top-row2-hang1">
          <div class="container-top-row2-hang1-lefttitle">我的订单</div>
          <div
            class="container-top-row2-hang1-righttitle"
            @click="handleByOrder('', 0)"
          >
            <span>全部订单</span>
            <span class="iconfont icon-jinrujiantou1 size"></span>
          </div>
        </div>
        <div class="container-top-row2-hang2">
          <div
            class="container-top-row2-hang2-item"
            @click="handleByOrder(1, 1)"
          >
            <div class="icon">
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="daizhifu"
              />
            </div>
            <div class="container-top-row2-hang2-item-wenzi">已支付</div>
          </div>
          <!-- <div
            class="container-top-row2-hang2-item"
            @click="handleByOrder(1, 2)"
          >
            <div class="icon">
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="a-yizhifu_huaban1"
              />
            </div>

            <div class="container-top-row2-hang2-item-wenzi">已支付</div>
          </div> -->
          <div
            class="container-top-row2-hang2-item"
            @click="handleByOrder(3, 2)"
          >
            <div class="icon">
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="yichupiao"
              />
            </div>

            <div class="container-top-row2-hang2-item-wenzi">已出票</div>
          </div>
          <div
            class="container-top-row2-hang2-item"
            @click="handleByOrder(4, 3)"
          >
            <div class="icon">
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="trues"
              />
            </div>

            <div class="container-top-row2-hang2-item-wenzi">已完成</div>
          </div>
          <div
            class="container-top-row2-hang2-item"
            @click="handleByOrder(-2, 4)"
          >
            <div class="icon">
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="tuikuan"
              />
            </div>

            <div class="container-top-row2-hang2-item-wenzi">已失败</div>
          </div>
        </div>
      </div>
      <div class="container-top-row3">
        <nut-cell-group style="border-radius: 25px; overflow: hidden">
          <nut-cell title="购票协议" to="" @click="skipGpxy">
            <template v-slot:icon>
              <div
                class="iconfont icon-yonghuxieyi2 imgSize"
                style="margin-right: 5px"
              ></div>
            </template>
            <template v-slot:link>
              <div class="iconfont icon-jinrujiantou iconfontSize"></div>
            </template>
          </nut-cell>
          <nut-cell title="用户协议" to="" @click="skipYhxy">
            <template v-slot:icon>
              <div
                class="iconfont icon-yonghuxieyi imgSize"
                style="margin-right: 5px"
              ></div>
            </template>
            <template v-slot:link>
              <div class="iconfont icon-jinrujiantou iconfontSize"></div>
            </template>
          </nut-cell>
          <nut-cell title="意见反馈" @click="skipFeedBack">
            <template v-slot:icon>
              <div
                class="iconfont icon-yijianfankui1 imgSize"
                style="margin-right: 5px"
              ></div>
            </template>
            <template v-slot:link>
              <div class="iconfont icon-jinrujiantou iconfontSize"></div>
            </template>
          </nut-cell>
          <!-- -->
          <nut-cell title="联系客服" @click="skipService">
            <template v-slot:icon>
              <div
                class="iconfont icon-lianxikefu imgSize"
                style="margin-right: 5px"
              ></div>
            </template>
            <template v-slot:link>
              <div class="iconfont icon-jinrujiantou iconfontSize"></div>
            </template>
          </nut-cell>
          <button open-type="im" v-if="kefuFlag" data-im-id="renwenshuo1107">
            联系客服
          </button>
        </nut-cell-group>
      </div>
    </div>
    <customTabBar ref="tabbar"></customTabBar>
  </div>
</template>

<script lang="ts">
import { needLogin } from "../../utils/needLoginHook";
export default {
  name: "My",
  mixins: [needLogin],
};
</script>
<script setup lang="ts">
import customTabBar from "../../components/custom-tab-bar/customTabBar.vue";
import { useTabbarStore, useUserStore } from "../../store";
import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";
import { useShareAppMessage } from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import { tt } from "@tarojs/taro-tt";

const tabbarStore = useTabbarStore();
const userStore = useUserStore();
const { selected, orderSelected, orderTabsIndex } = storeToRefs(tabbarStore);
const { Userinfo, shareUserId } = storeToRefs(userStore);
const router = Taro.useRouter();
const imId = ref("renwenshuo1107");
const kefuFlag = ref(false);
const handleClickAll = () => {
  // Taro.switchTab({
  //   url: "/pages/order/index",
  // });
};
const skipGpxy = () => {
  Taro.navigateTo({
    url: "/pages/privacy-agreement/index",
  });
};
useShareAppMessage(() => {
  return {
    title: "影橙电影票",
    page: `/pages/home/index`,
    imageUrl: "",
  };
});
onMounted(() => {
  Taro.showShareMenu({
    withShareTicket: true,
    menus: ["share"],
  });

});
const skipYhxy = () => {
  Taro.navigateTo({
    url: "/pages/user-agreement/index",
  });
};
const orderCenter = () => {
  Taro.navigateTo({
    url: "/pages/distrCenter/index",
  });
};
const skipFeedBack = () => {
  Taro.navigateTo({
    url: "/pages/feedback/index",
  });
};
const handleByOrder = (select, tabIndex) => {
  var obj = {
    value: select,
  };
  orderTabsIndex.value = tabIndex;
  orderSelected.value = obj.value;

  selected.value = 2;
  Taro.switchTab({
    url: `/pages/order/index`,
  });
};

const skipService = async () => {
  // tt.navigateToServiceChat({
  //   thirdPartyId: imId.value,
  //   success: () => {
  //     console.log("打开客服会话成功");
  //   },
  //   fail: (error) => {
  //     console.error("打开客服会话失败", error);
  //   },
  // });
  kefuFlag.value = true;
  return;
  Taro.navigateTo({
    url: "/pages/kf-service/index",
  });
};
</script>

<style lang="scss">
.container {
  .container-top {
    padding: 20px;

    .container-top-row1 {
      display: flex;
      padding: 15px 20px;
      justify-content: space-between;
      align-items: center;
      .container-top-row1-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .container-top-row1-left-name {
          margin-left: 15px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          .container-top-row1-left-name-font {
            font-weight: 700;
            color: #15181d;
            font-size: 30px;
          }
          .container-top-row1-left-name-id {
            background-color: #fff;
            font-size: 22px;
            padding: 6px 10px;
            margin-top: 8px;
            border-radius: 15px;
            box-sizing: border-box;
            text-align: center;
          }
        }
      }
      .container-rop-row1-right {
        display: flex;
        align-items: center;
        justify-content: center;
        .container-rop-row1-right-icon {
          color: #858a99;
          font-size: 36px;
        }
        .container-rop-row1-right-wenzi {
          font-size: 24px;
          color: #858a99;
        }
      }
    }
    .container-top-row2 {
      background-color: #fff;
      padding: 30px 20px;
      margin-top: 8px;
      border-radius: 25px;
      box-sizing: border-box;
      .container-top-row2-hang1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .container-top-row2-hang1-lefttitle {
          font-size: 30px;
          font-weight: 700;
        }
        .container-top-row2-hang1-righttitle {
          font-size: 24px;
          color: #858a99;
          display: flex;
          justify-content: center;
          align-items: center;
          .size {
            font-size: 36px;
          }
        }
      }
      .container-top-row2-hang2 {
        display: flex;
        margin-top: 30px;
        justify-content: space-around;
        align-items: center;
        .container-top-row2-hang2-item {
          .icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, #ff6034, #ee0a24);
            height: 50px;
            width: 50px;
            border-radius: 50px;
            // margin-right: 15px;
            .iconfont {
              font-size: 24px;
              color: #ffffff;
            }
          }

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          .container-top-row2-hang2-item-image {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .container-top-row2-hang2-item-wenzi {
            font-size: 26px;
            color: #15181d;
            // flex: 1;
            margin-top: 18px;
          }
        }
      }
    }
    .container-top-row3 {
      // margin-top: 20px;
      .nut-cell-group__wrap .nut-cell {
        color: #15181d !important;
        font-size: 24px;
      }
      .iconfontSize {
        font-size: 36px;

        color: #858a99;
      }
      .imgSize {
        font-size: 38px;
        color: #858a99;
      }
    }
  }
}
</style>
